<template>
	<view class="search">
		<!-- 搜索框 -->
		<uni-search-bar :placeholder="placeholderText" bgColor="#EEEEEE" v-model="searchValue">
			<template v-slot:searchIcon>
				<uni-icons color="#999999" size="18" type="search" @click="search" />
			</template>
		</uni-search-bar>
	</view>
</template>
<script>
	export default {
		name: "common",
		props: {
			placeholderText: {
				type: String,
				default: "搜索商品"
			}
		},
		data() {
			return {
				searchValue: "",
				// placeholderText: "搜索商品",

			};
		},
		methods: {
			search() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.search {

		padding-top: 6rpx;

		// 修改搜索框样式
		::v-deep .uni-searchbar {
			margin-top: 26rpx !important;
		}

		::v-deep .uni-section-header {
			display: none !important;
		}

		::v-deep .uni-searchbar__cancel {
			display: none;
		}

		::v-deep .uni-searchbar__box {
			width: 686rpx;
			height: 72rpx;
			gap: 28rpx;

		}

		::v-deep .uni-searchbar {
			// padding: 0 !important;
			padding-top: 0 !important;
			padding-bottom: 20rpx !important;
			// background-color: rgb(247, 247, 247);

		}

		::v-deep .uni-section-content {
			border: 2rpx solid rgb(247, 247, 247);
			margin: 26rpx auto 0 auto;
		}

		::v-deep .uni-searchbar {
			padding-bottom: 0 !important;
		}

	}
</style>